<%@page import="Forum.ForumThreadForm"%>
<%@ taglib uri="/WEB-INF/tld/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tld/struts-logic.tld" prefix="logic"%>
<%@ taglib uri="/WEB-INF/tld/struts-bean.tld" prefix="bean"%>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>
    	<logic:equal value="updatePost" property="task" name="forumThreadForm">
			Edit Comment
		</logic:equal>
		<logic:notEqual value="updatePost" property="task" name="forumThreadForm">
			Add New Comment
		</logic:notEqual>
    </title>
	<link href="/WebFinalProject/css/FinalProjectCSS.css" rel="stylesheet" type="text/css">
    <link rel="Stylesheet" type="text/css" href="js/style/jHtmlArea.css" />
    <script type="text/javascript" src="js/MasterJS.js"></script>
    <script type="text/javascript">
	    function goToThread(task,id) {	    	
			document.forms[0].task.value = task;
			document.forms[0].idThread.value = id;
			document.forms[0].submit();
		}
    </script>
    <style type="text/css">
        /* body { background: #ccc;} */
        div.jHtmlArea .ToolBar ul li a.custom_disk_button 
        {
            background: url(images/disk.png) no-repeat;
            background-position: 0 0;
        }
        
        div.jHtmlArea { border: solid 1px #ccc; }
    </style>
    
</head>
<html:javascript formName="forumThreadForm" dynamicJavascript="true" staticJavascript="true" method="validateForm" page="1"/>
<body onload="javascript:isiText();">
<!-- --------------------------------------------wysiwyg---------------------------------------------------------------------- -->
<!--  	<script type="text/javascript" src="js/scripts/jquery-1.3.2.js"></script> -->
    
<!-- --------------------------------------------wysiwyg---------------------------------------------------------------------- -->
	<center>
		<table width="1000px" class="bodyTable boxShadow">
		
			<!-- Header -->
			<tr>
				<td colspan="2"><%@include file="/include/Header.jsp"%></td>
			</tr>
		
			<!-- Content -->
			<tr>
				<td rowspan="2" width="200px" class="navigationBox"><%@include file="/include/Navigation.jsp"%></td>
				<td align="left" class="headerBox blueBackground">
					<a href="javascript:flyToPage('forumPage');">Forum Discussion</a> > 
					<a href="javascript:goToThread('thread','<bean:write name="forumThreadForm" property="idSelect"/>')"><bean:write name="forumThreadForm" property="judulThread"/></a> > 
					<logic:equal value="updatePost" property="task" name="forumThreadForm">
						Update Comment
					</logic:equal>
					<logic:notEqual value="updatePost" property="task" name="forumThreadForm">
						Add New Comment
					</logic:notEqual>
				</td>
			</tr>
			<tr>
				<td align="center" class="contentStyle"><br>
					<html:form action="/Forum" method="post">
					<html:hidden property="task"/>
					<html:hidden property="threadId"/>
					<html:hidden property="idThread"/>
				    <html:hidden property="idSelect"/>
					
					<html:hidden property="fComModel.forumThreadId"/>
					<html:hidden property="fComModel.forumThreadCommentid"/>
<%-- 					<html:hidden property="fComModel.comments"/> --%>
					<html:hidden property="fComModel.userId"/>
						<table width="95%" class="boxShadow">
							<tr>
								<th colspan="2" align="center" class="headerBox formHeaderBackground">
									<logic:equal value="updatePost" property="task" name="forumThreadForm">
										Update Comment
									</logic:equal>
									<logic:notEqual value="updatePost" property="task" name="forumThreadForm">
										Add New Comment
									</logic:notEqual>
								</th>
							</tr>
							<tr>
								<!-- <td>Enter Comment</td>
								<td>:</td> -->
								<td colspan="2" class="formListStyle" align="center">
								<html:textarea property="fComModel.comments" style="width:100%;"rows="15">
								</html:textarea>
<!-- 									<textarea id="txtComment" style="width:100%;"rows="15"> -->
<!-- 									</textarea> -->
									<script src="/WebFinalProject/js/scripts/jquery-1.3.2.min.js"></script>
									<script type="text/javascript" src="js/scripts/jHtmlArea-0.7.5.js"></script>
								 	<script type="text/javascript">
// 								        $(function() {
// 								        	 $("textarea").htmlarea();
// 								        });
										$(function() {
										    $("textarea").htmlarea({
										    	toolbar: [
										    	          ["html"],
										    	          ["bold", "italic", "underline"],
										    	          ["strikethrough","subscript", "superscript"],
										    	          ["h1", "h2", "h3", "h4", "h5", "h6"],
										    	          ["link", "unlink"],
										    	          ["image"],
										    	          ["indent", "outdent"],
										    	          ["justifyleft", "justifycenter", "justifyright"],
										    	          ["increasefontsize", "decreasefontsize"]
										    	      ]
										    	  });
										});
								    </script>
								</td>
							</tr>
							<tr class="formListBackground">
								<td align="right" class="formListStyle" width="50%">
									<table title="save" class="buttonStyle" style="cursor: pointer;" onclick="javascript:saveComment();">
										<tr>
											<td style="vertical-align: middle;"><img src="images/saveButton.png"/></td>
											<td style="vertical-align: middle;"><b>&nbsp;Save&nbsp;</b></td>
										</tr>
									</table>
								</td>
								<td align="left" class="formListStyle" width="50%">			
									<table title="cancel" class="buttonStyle" style="cursor: pointer;" onclick="javascript:document.forms[0].reset();backToForum();">
										<tr>
											<td style="vertical-align: middle;"><img src="images/cancelButton.png"/></td>
											<td style="vertical-align: middle;"><b>&nbsp;Cancel&nbsp;</b></td>
										</tr>
									</table>
								</td>
							</tr>
<!-- 							<tr> -->
<!-- 								<td colspan="1" align="right" style="padding: 5px 7px;"> -->
<!-- 									<input type="button" class="buttonStyle" value="Save" onclick="javascript:saveComment()" /> -->
<!-- 									<input type="button" class="buttonStyle" value="Cancel" onclick="javascript:backToForum()" /> -->
<!-- 								</td> -->
<!-- 							</tr> -->
						</table>
					</html:form>
					<br><br>
				</td>
			</tr>
			
			<!-- Footer -->
			<tr>
				<td align="center" colspan="2" class="headerBox blueBackground">&copy; OME. 2013. All Rights Reserved.</td>
			</tr>
		</table>
	</center>	
</body>
<script>
    function saveComment() {
//     	document.forms[0].elements['fComModel.comments'].value = document.getElementById('txtComment').value;
//     	 if (!validateForm(document.forms[0])) {
// 			return;
// 		}
    	document.forms[0].elements['fComModel.forumThreadId'].value = document.forms[0].threadId.value;
    	document.forms[0].elements['fComModel.forumThreadCommentid'].value = document.forms[0].threadId.value;
    	var userid = '<%= user.getUserid()%>';
    	document.forms[0].elements['fComModel.userId'].value = userid;
    	//alert(task + document.forms[0].elements['fComModel.userId'].value);
    	if(document.forms[0].elements['fComModel.comments'].value.length > 19000) {
			alert("Max Comment 20000 Character !!!");
		}else if(document.forms[0].elements['fComModel.comments'].value.length == 0){
			//alert("Submit");
			alert("Can't Submit Empty Comments !!!");
		} else {
    		document.forms[0].submit();
		}
    }
    
    function backToForum() {
    	document.forms[0].task.value = 'cancelPost';
    	document.forms[0].submit();
    }
    
    
    function isiText() {
    	document.getElementById('txtComment').value = document.forms[0].elements['fComModel.comments'].value;
    }
</script>
</html>